<template>
  <div class="header-menu-item" @mouseleave="() => { isShow = false }">
    <a href="javascript:;" class="link" @mouseover="() => { isShow = true }">登录/注册</a>
    <div class="dorpdown-box right" v-show="isShow">
      <a href="javascript:;" class="book-btn" @click="login">登录</a>
      <a href="javascript:;" class="book-btn default" @click="register">免费注册</a>
      <span>其他方式</span>
      <div class="other-login">
        <router-link tag="div" :to="{path: '#'}" class="other-login-item">
          <img src="/static/svg/weixin.svg" alt="微信">
          <span>微信</span>
        </router-link>
        <router-link tag="div" :to="{path: '#'}" class="other-login-item">
          <img src="/static/svg/qq.svg" alt="腾讯QQ">
          <span>QQ</span>
        </router-link>
        <router-link tag="div" :to="{path: '#'}" class="other-login-item">
          <img src="/static/svg/weibo.svg" alt="微博">
          <span>微博</span>
        </router-link>
      </div>
    </div>
    <loginForm ref="loginForm" :title="loginFormTitle" :loginType="loginFormType"></loginForm>
  </div>
</template>

<script>
import './headerMenuItem.scss'
import loginForm from './components/login'

export default {
  name: 'loginOrRegister',
  components: {
    loginForm
  },
  data () {
    return {
      isShow: false,
      loginFormTitle: '用户登录',
      loginFormType: 'login'
    }
  },
  methods: {
    login () {
      this.loginFormTitle = '用户登录'
      this.loginFormType = 'login'
      this.$nextTick(() => {
        this.$refs['loginForm'].open()
      })
    },
    register () {
      this.loginFormTitle = '用户注册'
      this.loginFormType = 'register'
      this.$nextTick(() => {
        this.$refs['loginForm'].open()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dorpdown-box {
  width: 150px;
  .other-login {
    display: flex;
    flex-direction: row;
    .other-login-item {
      margin: 0 10px;
      display: flex;
      flex-direction: column;
      flex: 1;
      cursor: pointer;
      img {
        width: 100%;
        overflow: hidden;
      }
      span {
        text-align: center;
      }
    }
  }
}
</style>
